<template>
  <div class="app-container">
    <div class="filter-container">
      <el-date-picker class="filter-item w-200" value-format="yyyy-MM-dd" size="small" v-model="listQuery.date"
        type="date" placeholder="选择日期时间">
      </el-date-picker>
      <el-input v-model="listQuery.receverPhone" size="small" placeholder="请输入接收号码" clearable
        class="filter-item w-200" />
      <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      <el-button size="small" icon="el-icon-refresh" @click="refresh">重置</el-button>
    </div>
    <el-table v-loading="listLoading" :data="tableData" element-loading-text="Loading" border fit height="580px"
      class="table-container" highlight-current-row>
      <el-table-column type="index" label="序号" prop width="50"></el-table-column>
      <el-table-column label="业务系统" align="center" prop="applicationName"> </el-table-column>
      <el-table-column label="接收人名称" align="center" prop="receverName"> </el-table-column>
      <el-table-column label="接收号码" align="center" prop="receverPhone"></el-table-column>
      <el-table-column label="发送内容" align="center" width="600" prop="messageContent"></el-table-column>
      <el-table-column label="操作类型" align="center" prop="operateType"></el-table-column>
      <el-table-column label="发送时间" align="center" prop="createTime">
        <template slot-scope="scope">
          <span>{{ formatX(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination style="margin-top: 20px" v-show="total > 0" :total="total" :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize" @pagination="fetchData" />
  </div>
</template>

<script>
import { dxList } from '@/http/api/myHttp.js'
import { formatX } from "@/utils/fontSize"
export default {
  components: {},
  data() {
    return {
      total: 0,
      tableData: [],
      listLoading: false,
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        date: "",
        receverPhone: ""
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    formatX,
    search() {
      this.fetchData()
    },
    refresh() {
      this.listQuery = {
        pageNo: 1,
        pageSize: 10,
        date:""
      }
      this.fetchData()
    },
    fetchData() {
      let params = { ...this.listQuery }
      for (let key in params) {
        if (!params[key]) {
          delete params[key]
        }
      }
      this.listLoading = true
      dxList(params).then((res) => {
        this.listLoading = false
        if (res.code == 0) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  // box-sizing: border-box;
  width: 100%;
  height: 100%;
  // padding: 18px 24px;
}

.filter-container {
  display: flex;
  justify-content: flex-start;
}

.filter-item {
  width: 300px;
  margin-right: 10px;
}

.el-table {
  ::v-deep {
    margin-top: 20px;

    .el-table__header {
      border-radius: 6px;
      overflow: hidden;
    }

    .el-table__cell {
      height: 50px;
      padding: 0;
    }

    .is-leaf {
      background-image: linear-gradient(to top, rgba(128, 191, 255, 1), rgba(51, 153, 255, 1));
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0px;
      line-height: 24px;
      color: rgba(255, 255, 255, 1);
      border-right: 1px solid white;
    }
  }
}

.operate_area {
  width: 80px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;

  img {
    cursor: pointer;
  }
}
</style>
